<template>
  <div class="welfare">
    <div class="content">
      <img :src="photo" mode="widthFix" style="width:100%;"/>
    </div>
    <div class="welfare-bottom">
      <div class="item" v-for="item in navigations"  >
        <img mode="widthFix" class="item-img" :src='item.logo'/>
<!--        <span class="img-text">{{item.name}}</span>-->
      </div>
    </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';
  import {list} from '../../../../api/navigation'
  import utils from '../../../../utils/utils'
  import {list as pageList} from '../../../../api/wxPage'
export default {
  name: '',
  data () {
    return {
      pageSize:4,
      pages:[],
      navigations:[],
      tagIds:[],
      photo:'',
      description:''

    }
  },
  computed: {
    ...mapGetters([
      'mchId'
    ])
  },
  props:[
    'content'
  ],
  created() {
    this.loadPage()
    this.loadNavigation()
  },
  methods: {
    loadPage(){

      if (!utils.isNull(this.content.tagids)) {
        this.tagIds = this.content.tagids.split(',');
        for (var i = 0; i <  this.tagIds.length; i++) {
          this.tagIds[i] = parseInt(this.tagIds[i])
        }
      }
      let params=new URLSearchParams()
      params.append('mchId', this.mchId);
      for (var i = 0; i < this.tagIds.length; i++) {
        params.append('tagId',this.tagIds[i])
      }
      pageList(params).then(res=>{
        this.pages=res.data.data
        this.photo=res.data.data[0].thumbnial
      })
    },
    loadNavigation(){
      if (!utils.isNull(this.content.tagids)) {
        this.tagIds = this.content.tagids.split(',');
        for (var i = 0; i <  this.tagIds.length; i++) {
          this.tagIds[i] = parseInt(this.tagIds[i])
        }
      }
      let params=new URLSearchParams()
      params.append('mchId', this.mchId);
      params.append('pageSize',this.pageSize)
      for (var i = 0; i < this.tagIds.length; i++) {
        params.append('tagIds',this.tagIds[i])
      }
      list(params).then(res=>{
        res.data.data.forEach(item=>{
          if (utils.isNull(item.logo)){
              item.logo='http://cdnx.hulu.fj.cn/upload/20200624/4.png'
          }
        })
        this.navigations=res.data.data

      })
    }
  },
}
</script>

<style scoped lang="scss">
  .welfare {
    position: relative;
    /*height: 210.5px;*/
  }
  .content{
    width: 355px;
    margin-left: 10px;
    border-radius: 8px;
    overflow: hidden;

  }
  .welfare-bg{
  	position: absolute;
  	left: 0;
  	top: 0;
  	width: 100%;
  	height: 100% !important;
  	z-index: -1;
  }
  .moom {
  	position: absolute;
  	left: 14px;
  	top: -26px;
  	width:16%;
  	background:rgba(252,242,210,1);
  	border-radius:50%;
  }
  .light {
  	position: absolute;
  	right: 2.5px;
  	top: -15px;
  	width: 11%;
  }
  .welfare-content {
  	width:100%;
  	height:100%;
  /* 	border:1px solid;
  	border-image:linear-gradient(0deg, rgba(255,242,224,1), rgba(252,223,185,1)) 10 10;
  	background:linear-gradient(0deg,rgba(255,242,224,1) 0%,rgba(252,223,185,1) 100%); */
  	border-radius:14px;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	text-align: center;
  	overflow: hidden;
  }
  .welfare-text {
  	width: 100%;
  	text-align: center;
  	margin-top: 13.5px;
  	font-size:24px;
  	font-family:SourceHanSerifCN;
  	font-weight:bold;
  	color:rgba(255,234,202,1);
  }
  .welfare-center {
  	margin-top: 8px;
  	width: 70%;
  	display: flex;
  	justify-content: space-between;
  }
  .welfare-center-left {
  	width: 15%;
  }
  .welfare-center-right {
  	width: 15%;
  }
  .welfare-date {
  	text-align: center;
  	font-size:10px;
  	font-family:PingFang SC;
  	font-weight:400;
  	color:rgba(255,234,202,1);
  }
  .welfare-bottom {
    width: 355px;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    left: 10px;
  }

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 77px;
    height: 77px;
  }
  .item-img {
  	width: 100%;
    height: 100%;
  }
  .img-text {

  	font-size:12px;
  	font-weight:400;
  	color:rgba(193,71,51,1);
  	line-height:18px;
  }
</style>
